<template>
  <div class="panel-box mg-all">
    <div class="panel-head" @click="goProdPage(firstProd.product_id)">
      <p class="ellipsi-title">{{firstProd.product_name}}</p>
      <div class="panel-head-tool">
        <van-icon class-prefix="ucai-icon" name="arrow_rgt" />
      </div>
    </div>
    <collapse-panel :isTopHandler=false :isCollapsed=isCollapsed>
      <template slot="panel">
        <div v-for="(prod, prodIndex) in list" :key="prod.product_id">
          <div v-if="prodIndex !== 0" class="panel-head bord-top radius-no mg-top" @click="goProdPage(prod.product_id)">
            <p class="ellipsi-title">{{prod.product_name}}</p>
            <div class="panel-head-tool">
              <van-icon class-prefix="ucai-icon" name="arrow_rgt" />
            </div>
          </div>
          <div v-for="(item, itemIndex) in prod.item_list" :key="item.id">

            <!-- BLOCK: 基础信息 -->
            <ul :class="['panel-list', itemIndex == 0 ? '' : 'bord-top mg-top-xs pd-top-xs']">
              <li>
                <van-row>
                  <van-col class="title" span="7">出游日期</van-col>
                  <van-col class="desc" span="17">{{data.avail_date_desc}}</van-col>
                </van-row>
              </li>
              <li>
                <van-row>
                  <van-col class="title" span="7">有效期</van-col>
                  <van-col class="desc" span="17">{{item.valid_date_desc}}</van-col>
                </van-row>
              </li>
              <li>
                <van-row>
                  <van-col class="title" span="7">价格套餐</van-col>
                  <van-col class="desc" span="17">{{item.sku_name}}</van-col>
                </van-row>
              </li>
              <li>
                <van-row>
                  <van-col class="title" span="7">购买份数</van-col>
                  <van-col class="desc" span="17">￥{{item.sale_price}} × {{item.qty}}</van-col>
                </van-row>
              </li>
            </ul>

            <!-- BLOCK: 退款信息 -->
            <div class="panel-head" v-if="item.refund_info">
              <van-row>
                <van-col span="7">退改规则</van-col>
                <van-col span="17">
                  <a class="font-md c-main" @click="showRefundSheet(item.refund_info.title, item.refund_info.desc)">
                    {{item.refund_info.title}}
                    <van-icon class-prefix="ucai-icon" name="zhushi" />
                  </a>
                  <div class="panel-head-tool">
                    <van-button
                      v-if="item.has_refund == 1"
                      size="small"
                      type="default"
                      plain
                      hairline
                      @click="$goPage('refund/list', { 
                      order_no: data.order_no, 
                      sku_id: item.sku_id
                    })"
                    >退款详情</van-button>
                    <van-button
                      v-if="item.is_can_refund == 1"
                      size="small"
                      type="default"
                      plain
                      hairline
                      @click="$goPage('refund', { 
                      order_no: data.order_no, 
                      sku_id: item.sku_id,
                    })"
                    >退款</van-button>
                  </div>
                </van-col>
              </van-row>
            </div>

            <!-- BLOCK: 出行人 -->
            <ul class="panel-list">
              <traveler-item v-for="(traveler, index) in item.traveler" :key="traveler.identity_code+index" v-if="index < 3" :data="traveler" :index=(index+1) />
              <li v-if="item.traveler && item.traveler.length >= 3">
                <van-row>
                  <van-col offset="7" class="desc" span="17">
                    <a class="font-md c-main" @click="showTravelerSheet(prod, item)">
                      更多出行人
                    </a>
                  </van-col>
                </van-row>
              </li>
            </ul>
          </div>

          <!-- BLOCK: 备注&预订人 -->
          <div class="panel-foot pd-top-xs pd-hor-no pd-btm-no">
            <ul class="panel-list">
              <li v-if="!!data.remark">
                <van-row>
                  <van-col span="7">备注</van-col>
                  <van-col span="17">
                    {{data.remark}}
                  </van-col>
                </van-row>
              </li>
              <li>
                <van-row>
                  <van-col span="7">预订人</van-col>
                  <van-col span="17">
                    {{data.contact_name || ''}}&nbsp;{{data.contact_phone || '--'}}
                  </van-col>
                </van-row>
              </li>
            </ul>
          </div>

        </div>
      </template>
      <template slot="open-handler">
        <div class="panel-foot text-center c-main">
          展开全部订单信息
          <van-icon class-prefix="ucai-icon" name="arrow_rgt" />
        </div>
      </template>
      <template slot="close-handler">
        <div class="panel-foot text-center c-main">
          收起全部订单信息
          <van-icon class-prefix="ucai-icon" name="arrow_rgt" />
        </div>
      </template>
    </collapse-panel>

    <!-- BLOCK: 弹窗-出行人信息 -->
    <van-action-sheet v-model="isShowTravelerSheet" title="出行人信息">
      <div class="panel-block">
        <div class="panel-head">
          {{travelerSheetProd.product_name}}
          <p class="font-default">{{travelerSheetItem.sku_name}}</p>
        </div>
        <ul class="panel-list" v-for="(traveler, index) in travelerSheetItem.traveler" :key="traveler.identity_code">
          <traveler-item :data="traveler" :index=(index+1) />
        </ul>
      </div>
    </van-action-sheet>

    <!-- BLOCK: 弹窗-退改规则 -->
    <van-action-sheet v-model="isShowRefundSheet" title="退改规则">
      <div class="panel-block">
        <div class="panel-head">
          {{refundSheetTitle}}
        </div>
        <div class="panel-body">
          <ul>
            <li v-for="desc in refundSheetDesc" :key="desc">
              <div v-html="desc"></div>
            </li>
          </ul>
        </div>
      </div>
    </van-action-sheet>

  </div>
</template>

<script>
  import {
    Icon,
    Button,
    Row,
    Col,
    ActionSheet,
  } from 'vant'
  import CollapsePanel from "@cmpt/panel/collapse"
  import TravelerItem from '@views/order/components/traveler-item'

  import {
    getResubmitSecret,
  } from "@api/modules/order"

  import {
    getRole
  } from '@utils/role'

  export default {
    name: 'prod-panel',
    components: {
      [Icon.name]: Icon,
      [Button.name]: Button,
      [Row.name]: Row,
      [Col.name]: Col,
      [ActionSheet.name]: ActionSheet,

      CollapsePanel,
      TravelerItem,
    },

    props: {
      data: {
        type: Object,
        default: {}
      },
      isCollapsed: {
        type: Boolean,
        default: false
      },
    },

    data() {
      return {
        role: getRole(),
        // 出行人弹窗
        isShowTravelerSheet: false,
        travelerSheetProd: '',
        travelerSheetItem: '',
        // 退款说明弹窗
        isShowRefundSheet: false,
        refundSheetTitle: '',
        refundSheetDesc: [],
      }
    },

    computed: {
      list: function () {
        const data = this.data || {}
        return data.product_list || []
      },
      firstProd: function () { // 第一个产品数据
        const list = this.list || []
        return list[0] || {}
      },
    },

    methods: {

      goProdPage(id) {
        if (this.role !== '0') {
          this.$goPage('product/detail', {
            id
          })
          return
        }
        // 游客请求加密传后跳转
        getResubmitSecret({
          order_no: this.data.order_no
        }).then(res => {
          const data = res.data
          this.$goPage('product/detail', {
            id: id,
            secret: data.secret
          })
        }).catch(err => {})
      },

      /** 
       * 展示出行人弹窗
       */
      showTravelerSheet(prod, item) {
        this.travelerSheetProd = prod
        this.travelerSheetItem = item
        this.isShowTravelerSheet = true
      },

      /** 
       * 展示退款说明弹窗
       */
      showRefundSheet(title, desc) {
        this.refundSheetTitle = title
        this.refundSheetDesc = typeof desc === 'string' ? [desc] : desc
        this.isShowRefundSheet = true
      },
    },

    created() {},

  }
</script>

<style lang="less" scoped>
  @import "~@style_m/basic/utils/index";

  .ellipsi-title {
    width: 90%;
    .ellipsis(2);
  }
</style>
